<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>中医连连看</title>
        <style type="text/css">
            body {
                font-family:arial,\5b8b\4f53;
                background-color:RGB(208,225,205);
            }
            div {
                text-align:center;
                margin:0 auto;
            }
            table {
                border-collapse:separate;
                border-spacing:5px 5px;
                border:1px grey dashed;
                text-align:center;
                margin:10px auto;
            }
            td {
                font-weight:bold;
            }
            /* 小格子的默认样式 */
            .common {
                border:1px grey solid;
                color:grey;
                cursor:pointer;
            }
            /* 小格子被消除样式 */
            td.removed {
                border:1px black solid;
                color:black;
                cursor:default;
            }
            /* 小格子被选中样式 */
            td.active {
                border:1px crimson solid;
                color:crimson;
                cursor:pointer;
            }
			img {
				display: block;
			}
        </style>
        <script type="text/javascript" src="./statics/js/jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
            // 存放数据的地方
            function getDataInfo(index) {
                var dataList = [
					{id:0,name: '鹿茸', alias: '斑龙珠、鹿茸片', indications: '壮肾阳，益精血，强筋骨，调冲任，固带脉，托疮毒。',efficacy: '用于肾阳不足，精血亏虚，阳痿滑精，宫冷不孕，羸瘦，神疲，畏寒，眩晕，耳鸣，耳聋，腰脊冷痛，筋骨痿软，崩漏带下，阴疽不敛。',commonlyUsed: '常用于性功能障碍、骨质疏松症、更年期综合征、耳鸣耳聋、贫血等疾病的治疗。',picture1:'./statics/images/1-鹿茸.jpg',picture2:'./statics/images/1-鹿茸1.jpg'},
					{id:1,name: '淫羊藿', alias: '仙灵脾、刚前', indications: '温肾壮阳，强筋骨，祛风湿。',efficacy: '用于肾阳虚衰，阳痿遗精，筋骨痿软，风湿痹痛，麻木拘挛。',commonlyUsed: '常用于性功能障碍、骨关节炎、更年期综合征、高血压、冠心病等疾病的治疗。',picture1:'./statics/images/2-淫羊藿.jpg',picture2:'./statics/images/2-淫羊藿1.jpg'},
					{id:2,name: '巴戟天', alias: '鸡肠风、鸡眼藤、三角藤', indications: '补肾阳，益精血，强筋骨，祛风湿。',efficacy: '用于阳痿遗精，宫冷不孕，月经不调，少腹冷痛，风湿痹痛，筋骨痿软。',commonlyUsed: '常用于性功能障碍、卵巢早衰、慢性疲劳综合征、骨关节炎等疾病的治疗。',picture1:'./statics/images/3-巴戟天.jpg',picture2:'./statics/images/3-巴戟天1.jpg'},
					{id:3,name: '肉苁蓉', alias: '大芸、地精', indications: '补肾阳，益精血，润肠通便。',efficacy: '用于肾阳不足，精血亏虚，阳痿不孕， 腰膝酸软，筋骨无力，肠燥便秘。',commonlyUsed: '常用于便秘、腰椎间盘退行性变、慢性肾炎、性功能障碍等疾病的治疗。',picture1:'./statics/images/4-肉苁蓉.jpg',picture2:'./statics/images/4-肉苁蓉1.jpg'},
					{id:4,name: '锁阳', alias: '不老药、地毛球', indications: '补肾阳，益精血，润肠通便。',efficacy: '用于肾阳不足，精血亏虚，腰膝痿软，阳痿滑精，肠燥便秘。',commonlyUsed: '常用于便秘、性功能障碍、骨关节炎、腰椎间盘退行性变等疾病的治疗。',picture1:'./statics/images/5-锁阳.jpg',picture2:'./statics/images/5-锁阳1.jpg'},
					{id:5,name: '杜仲', alias: '思仙、木绵、扯丝皮', indications: '补肝肾，强筋骨，安胎。',efficacy: '用于肝肾不足，腰膝酸痛，筋骨无力，头晕目眩，妊娠漏血，胎动不安。',commonlyUsed: '常用于腰椎间盘突出症、原发性高血压、眩晕综合征、先兆流产等疾病的治疗。',picture1:'./statics/images/6-杜仲.jpg',picture2:'./statics/images/6-杜仲1.jpg'},
					{id:6,name: '补骨脂', alias: '破故纸、婆固脂', indications: '补肾助阳，固精缩尿，暖脾止泻，纳气平喘。',efficacy: '用于肾阳不足，阳痿遗精，遗尿尿频，腰膝冷痛，肾虚作喘，五更泄泻；外用治白癜风，斑秃。',commonlyUsed: '常用于白癜风、斑秃、哮喘、骨质疏松、腹泻、性功能障碍等疾病的治疗。',picture1:'./statics/images/7-补骨脂.jpg',picture2:'./statics/images/7-补骨脂1.jpg'},
					{id:7,name: '菟丝子', alias: '吐丝子、豆寄生', indications: '补肾固精，养肝明目，止泻安胎。',efficacy: '用于肝肾不足，腰膝酸软，阳痿遗精，遗尿尿频，肾虚胎漏，胎动不安，目昏耳鸣，脾肾虚泻；外治白癜风。',commonlyUsed: '常用于黄褐斑、习惯性流产、性功能障碍、腹泻、飞蚊症等疾病的治疗。',picture1:'./statics/images/8-菟丝子.jpg',picture2:'./statics/images/8-菟丝子1.jpg'},
					{id:8,name: '沙苑子', alias: '沙蒺藜、潼蒺藜', indications: '补肾固精，养肝明目。',efficacy: '用于肾虚腰痛，遗精早泄，遗尿尿频，白浊带下，眩晕，目暗昏花。',commonlyUsed: '常用于蛋白尿、性功能障碍、视力下降等疾病的治疗。',picture1:'./statics/images/9-沙苑子.jpg',picture2:'./statics/images/9-沙苑子1.jpg'},
					{id:9,name: '韭菜子', alias: '韭子、起阳草子', indications: '温补肝肾，壮阳固精。',efficacy: '用于肝肾亏虚，腰膝酸痛，阳痿遗精，遗尿尿频，白浊带下。',commonlyUsed: '常用于前列腺增生、性功能障碍等疾病的治疗。',picture1:'./statics/images/10-韭菜子.jpg',picture2:'./statics/images/10-韭菜子1.jpg'},
					{id:10,name: '熟地黄', alias: '九地、伏地', indications: '补血滋阴，益精填髓。',efficacy: '用于血虚萎黄，心悸怔忡，月经不调，崩漏下血，肝肾阴虚，腰膝酸软，骨蒸潮热，盗汗遗精，内热消渴，眩晕，耳鸣，须发早白。',commonlyUsed: '常用于贫血、甲状腺功能减退、更年期综合征、慢性肾衰竭、慢性疲劳综合征等疾病的治疗。',picture1:'./statics/images/11-熟地黄.jpg',picture2:'./statics/images/11-熟地黄1.jpg'},
					{id:11,name: '山茱萸', alias: '枣皮、萸肉', indications: '补益肝肾，收敛固涩。',efficacy: '用于眩晕耳鸣，腰膝酸痛，阳痿遗精，遗尿尿频，崩漏带下，大汗虚脱，内热消渴。',commonlyUsed: '常用于糖尿病、眩晕综合征、月经过多、尿崩症、性功能障碍等疾病的治疗。',picture1:'./statics/images/12-山茱萸.jpg',picture2:'./statics/images/12-山茱萸1.jpg'},
					{id:12,name: '枸杞子', alias: '苟起子、甜菜子', indications: '补肝肾，明目润肺。',efficacy: '用于虚劳精亏，腰膝酸痛，眩晕耳鸣，阳痿遗精，内热消渴，血虚萎黄，目昏不明。',commonlyUsed: '常用于干眼症、脂肪肝、代谢综合征、免疫力低下、糖尿病等疾病的治疗。',picture1:'./statics/images/13-枸杞子.jpg',picture2:'./statics/images/13-枸杞子1.jpg'},
					{id:13,name: '女贞子', alias: '冬青子、女贞实', indications: '补肝肾阴，乌须明目。',efficacy: '用于肝肾阴虚，眩晕耳鸣，腰膝酸软，须发早白，目暗不明，内热消渴，骨蒸潮热。',commonlyUsed: '常用于眩晕综合征、糖尿病、耳鸣耳聋等疾病的治疗。',picture1:'./statics/images/14-女贞子.jpg',picture2:'./statics/images/14-女贞子1.jpg'},
					{id:14,name: '墨旱莲', alias: '金陵草、旱莲草', indications: '补肝肾阴，凉血止血。',efficacy: '用于肝肾阴虚，牙齿松动，须发早白，眩晕耳鸣，腰膝酸软，阴虚血热吐血、衄血、尿血，血痢，崩漏下血，外伤出血。',commonlyUsed: '常用于过敏性紫癜、贫血、血小板减少症、眩晕综合征等疾病的治疗。',picture1:'./statics/images/15-墨旱莲.jpg',picture2:'./statics/images/15-墨旱莲1.jpg'},
					{id:15,name: '龟甲', alias: '龟板、下甲、乌龟壳', indications: '滋阴潜阳，益肾健骨，固经止血，养血补心。',efficacy: '用于阴虚潮热，骨蒸盗汗，头晕目眩，虚风内动，筋骨痿软，心虚健忘，崩漏经多。',commonlyUsed: '常用于更年期综合征、植物神经功能紊乱、慢性疲劳综合征等疾病的治疗。',picture1:'./statics/images/16-龟甲.jpg',picture2:'./statics/images/16-龟甲1.jpg'},
					{id:16,name: '鳖甲', alias: '上甲、团鱼甲、甲鱼壳', indications: '滋阴潜阳，软坚散结。',efficacy: '用于阴虚发热，骨蒸劳热，阴虚阳亢，头晕目眩，虚风内动，手足瘈疭，经闭，癥瘕，久疟疟母。',commonlyUsed: '常用于更年期综合征、眩晕综合征等疾病的治疗。',picture1:'./statics/images/17-鳖甲.jpg',picture2:'./statics/images/17-鳖甲1.jpg'},
					{id:17,name: '黄精', alias: '老虎姜、笔管菜', indications: '滋阴润肺，补脾益气。',efficacy: '用于脾胃气虚，体倦乏力，胃阴不足，口干食少，肺虚燥咳，劳嗽咳血，精血不足，腰膝酸软，须发早白，内热消渴。',commonlyUsed: '常用于糖尿病前期、慢性萎缩性胃炎、动脉粥样硬化、慢性疲劳综合征等疾病的治疗。',picture1:'./statics/images/18-黄精.jpg',picture2:'./statics/images/18-黄精1.jpg'},
					{id:18,name: '桑椹', alias: '桑果、桑枣', indications: '滋阴补血，生津润肠。',efficacy: '用于肝肾阴虚，眩晕耳鸣，心悸失眠，须发早白，津伤口渴，内热消渴，肠燥便秘。',commonlyUsed: '常用于便秘、神经衰弱、缺铁性贫血、耳鸣耳聋等疾病的治疗。',picture1:'./statics/images/19-桑椹.jpg',picture2:'./statics/images/19-桑椹1.jpg'},
					{id:19,name: '天冬', alias: '天门冬、丝冬', indications: '养阴润燥，清火生津。',efficacy: '用于肺燥干咳，顿咳痰黏，腰膝酸痛，骨蒸潮热，内热消渴，热病津伤，咽干口渴，肠燥便秘。',commonlyUsed: '常用于干燥综合征、肺结核咯血、便秘、糖尿病等疾病的治疗。',picture1:'./statics/images/20-天冬.jpg',picture2:'./statics/images/20-天冬1.jpg'},
					{id:20,name: '桑螵蛸', alias: '流尿狗、螳螂子', indications: '固精缩尿，补肾助阳。',efficacy: '用于遗精滑精，遗尿尿频，小便白浊。',commonlyUsed: '常用于遗精症、遗尿症、前列腺炎、尿路感染等疾病的治疗。',picture1:'./statics/images/21-桑螵蛸.jpg',picture2:'./statics/images/21-桑螵蛸1.jpg'},
					{id:21,name: '海马', alias: '水马、马头鱼', indications: '补肾壮阳，活血散结，消肿止痛。',efficacy: '用于阳痿，遗尿，肾虚作喘，癥瘕积聚，跌扑损伤；外治痈肿疔疮。',commonlyUsed: '常用于遗尿症、哮喘、阳痿等疾病的治疗。',picture1:'./statics/images/22-海马.jpg',picture2:'./statics/images/22-海马1.jpg'},
					{id:22,name: '蛤蚧', alias: '仙蟾、大壁虎', indications: '助肾阳，益精血，补肺气，定喘嗽。',efficacy: '用于肺肾不足，虚喘气促，劳嗽咳血，阳痿，遗精。',commonlyUsed: '常用于慢性阻塞性肺疾病、哮喘、性功能障碍等疾病的治疗。',picture1:'./statics/images/23-蛤蚧.jpg',picture2:'./statics/images/23-蛤蚧1.jpg'},
					{id:23,name: '冬虫夏草', alias: '虫草、中华虫草', indications: '益肾壮阳，补肺平喘，止血化痰。',efficacy: '用于肾虚精亏，阳痿遗精，腰膝酸痛，久咳虚喘，劳嗽咯血。',commonlyUsed: '常用于慢性肾衰竭、慢性阻塞性肺疾病、性功能障碍等疾病的治疗。',picture1:'./statics/images/24-冬虫夏草.jpg',picture2:'./statics/images/24-冬虫夏草1.jpg'},
					{id:24,name: '核桃仁', alias: '胡桃仁、胡桃肉', indications: '补肾益肺，纳气定喘，润肠通便。',efficacy: '用于肾阳不足，腰膝酸软，阳痿遗精，虚寒喘嗽，肠燥便秘。',commonlyUsed: '常用于便秘、性功能障碍、腰椎间盘退行性变等疾病的治疗。',picture1:'./statics/images/25-核桃仁.jpg',picture2:'./statics/images/25-核桃仁1.jpg'},
					{id:25,name: '续断', alias: '川断、接骨草', indications: '补肝肾，强筋骨，止血安胎，疗伤续折。',efficacy: '用于肝肾不足，腰膝酸软，风湿痹痛，跌扑损伤，筋伤骨折，崩漏，胎漏。',commonlyUsed: '常用于骨折、骨关节炎、习惯性流产、腰椎间盘突出症等疾病的治疗。',picture1:'./statics/images/26-续断.jpg',picture2:'./statics/images/26-续断1.jpg'},
					{id:26,name: '骨碎补', alias: '猴姜、毛姜', indications: '活血续筋，补肾强骨。',efficacy: '用于跌扑闪挫，筋骨折伤，肾虚腰痛，筋骨痿软，耳鸣耳聋，牙齿松动；外治斑秃，白癜风。',commonlyUsed: '常用于骨折、骨关节炎、斑秃、白癜风、耳鸣耳聋等疾病的治疗。',picture1:'./statics/images/27-骨碎补.jpg',picture2:'./statics/images/27-骨碎补1.jpg'},
					{id:27,name: '狗脊', alias: '金毛狗脊、黄狗头', indications: '祛风湿，补肝肾，强腰膝。',efficacy: '用于风湿痹痛，腰膝酸软，下肢无力。',commonlyUsed: '常用于腰椎间盘退行性变、风湿性关节炎等疾病的治疗。',picture1:'./statics/images/28-狗脊.jpg',picture2:'./statics/images/28-狗脊1.jpg'},
					{id:28,name: '仙茅', alias: '独脚仙茅、冷饭草', indications: '温肾壮阳，强筋骨，祛寒湿，温脾止泻。',efficacy: '用于阳痿精冷，筋骨痿软，腰膝冷痛，阳虚冷泻。',commonlyUsed: '常用于甲状腺功能减退症、更年期综合征、植物神经功能紊乱、慢性疲劳综合征等疾病的治疗。',picture1:'./statics/images/29-仙茅.jpg',picture2:'./statics/images/29-仙茅1.jpg'},
					{id:29,name: '覆盆子', alias: '树莓、野莓', indications: '固精缩尿，益肾养肝。',efficacy: '用于遗精滑精，遗尿尿频，阳痿早泄，目暗昏花。',commonlyUsed: '常用于前列腺增生、性功能障碍、尿道综合征等疾病的治疗。',picture1:'./statics/images/30-覆盆子.jpg',picture2:'./statics/images/30-覆盆子1.jpg'},
					{id:30,name: '五味子', alias: '五梅子、山花椒', indications: '敛肺滋肾，生津敛汗，涩精止泻，宁心安神。',efficacy: '用于月经不调，痛经，麻木瘫痪，风湿痹痛，气血虚弱。',commonlyUsed: '常用于月经失调、糖尿病、失眠、慢性疲劳综合征等疾病的治疗。',picture1:'./statics/images/31-五味子.jpg',picture2:'./statics/images/31-五味子1.jpg'},
					{id:31,name: '芡实', alias: '鸡头米、水流黄', indications: '补脾止泻，益肾固精，除湿止带。',efficacy: '用于遗精滑精，遗尿尿频，脾虚久泻，白浊，带下。',commonlyUsed: '常用于遗尿症、白带过多、腹泻等疾病的治疗。',picture1:'./statics/images/32-芡实.jpg',picture2:'./statics/images/32-芡实1.jpg'},
					{id:32,name: '金樱子', alias: '糖罐子、刺梨子、金壶瓶', indications: '固精缩尿，涩肠止泻。',efficacy: '用于遗精滑精，遗尿尿频，崩漏带下，久泻久痢。',commonlyUsed: '常用于慢性前列腺炎、腹泻、遗精症等疾病的治疗。',picture1:'./statics/images/33-金樱子.jpg',picture2:'./statics/images/33-金樱子1.jpg'},
					{id:33,name: '益智', alias: '益智仁、益智子', indications: '温肾助阳，固精缩尿，温脾止泻，开胃摄唾。',efficacy: '用于肾虚遗尿，小便频数，遗精白浊，脾寒泄泻，腹中冷痛，口多唾涎。',commonlyUsed: '常用于老年痴呆、小儿流涎症、唾液分泌过多、腹泻等疾病的治疗。',picture1:'./statics/images/34-益智.jpg',picture2:'./statics/images/34-益智1.jpg'},
					{id:34,name: '蛇床子', alias: '蛇米、野茴香、癞头花子', indications: '杀虫止痒，祛风燥湿，温肾壮阳。',efficacy: '用于阴痒带下，湿疹瘙痒，湿痹腰痛，肾虚阳痿，宫冷不孕。',commonlyUsed: '常用于湿疹、疥疮、滴虫性阴道炎等疾病的治疗。',picture1:'./statics/images/35-蛇床子.jpg',picture2:'./statics/images/35-蛇床子1.jpg'},
					{id:35,name: '附子', alias: '附片、 铁花', indications: '回阳救逆，补火助阳，散寒止痛。',efficacy: '用于亡阳虚脱，肢冷脉微，心阳不足 胸痹心痛 虚寒吐泻，脘腹冷痛，肾阳虚衰，阳痰宫冷，阴寒水肿，阳虚外感，寒湿痹痛。',commonlyUsed: '常用于病态窦房结综合征、类风湿关节炎、重度低血压等疾病的治疗。',picture1:'./statics/images/36-附子.jpg',picture2:'./statics/images/36-附子1.jpg'},
					{id:36,name: '肉桂', alias: '玉桂、牡桂', indications: '补火助阳，散寒止痛，温经通脉。',efficacy: '用于阳痿宫冷，腰膝冷痛，肾虚作喘，虚阳上浮，眩晕目赤，心腹冷痛，虚寒吐泻，寒疝腹痛，痛经经闭。',commonlyUsed: '常用于糖尿病周围神经病变、痛经、外周循环障碍、哮喘等疾病的治疗。',picture1:'./statics/images/37-肉桂.jpg',picture2:'./statics/images/37-肉桂1.jpg'},
					{id:37,name: '海龙', alias: '水雁、海蛇', indications: '温肾壮阳，散结消肿。',efficacy: '用于肾阳不足，阳痿遗精，癥瘕积聚，瘰疬痰核，跌扑损伤；外治痈肿疔疮。',commonlyUsed: '常用于性功能障碍、痈肿疔疮等疾病的治疗。',picture1:'./statics/images/38-海龙.jpg',picture2:'./statics/images/38-海龙1.jpg'},
					{id:38,name: '丁香', alias: '公丁香、丁子香', indications: '温中降逆， 补肾助阳。',efficacy: '用于脾胃虚寒，呃逆呕吐，食少吐泻，心腹冷痛，肾虚阳痿。',commonlyUsed: '常用于腹痛、腹泻、性功能障碍等疾病的治疗。',picture1:'./statics/images/39-丁香.jpg',picture2:'./statics/images/39-丁香1.jpg'},
					{id:39,name: '阳起石', alias: '白石、羊起石', indications: '温肾壮阳。',efficacy: '用于肾阳虚衰，腰膝冷痹，男子阳痿遗精，女子宫冷不孕，崩漏，癥瘕。',commonlyUsed: '常用于性功能障碍、卵巢功能低下等疾病的治疗。',picture1:'./statics/images/40-阳起石.jpg',picture2:'./statics/images/40-阳起石1.jpg'},
					{id:40,name: '山药', alias: '山薯蓣、薯蓣', indications: '益气养阴，补脾肺肾，固精止带。',efficacy: '用于脾虚食少，久泻不止，肺虚喘咳，肾虚遗精，带下，尿频，虚热消渴。',commonlyUsed: '常用于腹泻、糖尿病、慢性阻塞性肺疾病等疾病的治疗。',picture1:'./statics/images/41-山药.jpg',picture2:'./statics/images/41-山药1.jpg'},
					{id:41,name: '何首乌', alias: '首乌、地精', indications: '补益精血，固肾乌须。',efficacy: '用于疮痈，瘰疬， 风疹瘙痒，久疟体虚，肠燥便秘。',commonlyUsed: '常用于白发症、便秘、慢性疲劳综合征等疾病的治疗。',picture1:'./statics/images/42-何首乌.jpg',picture2:'./statics/images/42-何首乌1.jpg'},
					{id:42,name: '黑芝麻', alias: '胡麻、油麻', indications: '补肝肾，益精血，润肠燥。',efficacy: '用于精血亏虚，头晕眼花，耳鸣耳聋，须发早白，病后脱发，肠燥便秘。',commonlyUsed: '常用于脱发、便秘、耳鸣耳聋等疾病的治疗。',picture1:'./statics/images/43-黑芝麻.jpg',picture2:'./statics/images/43-黑芝麻1.jpg'},
					{id:43,name: '桑寄生', alias: '广寄生、冬青', indications: '祛风湿，益肝肾，强筋骨，安胎。',efficacy: '用于风湿痹痛，腰膝酸软，筋骨无力，崩漏经多，妊娠漏血，胎动不安，头晕目眩。',commonlyUsed: '常用于眩晕综合征、腰椎间盘退行性变、先兆流产、高血压等疾病的治疗。',picture1:'./statics/images/44-桑寄生.jpg',picture2:'./statics/images/44-桑寄生1.jpg'},
					{id:44,name: '牛膝', alias: '怀牛膝、山苋菜', indications: '活血通经，补肝肾，强筋骨，引火下行，利尿通淋。',efficacy: '用于经闭，痛经，腰膝酸痛，筋骨无力，淋证，水肿，头痛，眩晕，牙痛，口疮，吐血，衄血。',commonlyUsed: '常用于原发性高血压、骨质增生、闭经、痛风性关节炎等疾病的治疗。',picture1:'./statics/images/45-牛膝.jpg',picture2:'./statics/images/45-牛膝1.jpg'},
					{id:45,name: '石斛', alias: '林兰、金钗花', indications: '养阴清热，益胃生津。',efficacy: '用于热病津伤，口干烦渴，胃阴不足，食少干呕，病后虚热不退，阴虚火旺，骨蒸劳热，目暗不明，筋骨痿软。',commonlyUsed: '常用于慢性胃炎、糖尿病、白内障等疾病的治疗。',picture1:'./statics/images/46-石斛.jpg',picture2:'./statics/images/46-石斛1.jpg'},
					{id:46,name: '紫石英', alias: '氟石、萤石', indications: '温肾暖宫，镇心安神，温肺平喘。',efficacy: '用于肾阳亏虚，宫冷不孕，惊悸不安，失眠多梦，虚寒咳喘。',commonlyUsed: '常用于神经衰弱、更年期心悸、哮喘等疾病的治疗。',picture1:'./statics/images/47-紫石英.jpg',picture2:'./statics/images/47-紫石英1.jpg'},
					{id:47,name: '楮实子', alias: '楮实、榖实、榖子、楮桃', indications: '补肾清肝，明目，利尿。',efficacy: '用于肝肾不足，腰膝酸软，虚劳骨蒸，头晕目昏，目生翳膜，水肿胀满。',commonlyUsed: '常用于水肿病、腰椎间盘退行性变、眩晕综合征、白内障等疾病的治疗。',picture1:'./statics/images/48-楮实子.jpg',picture2:'./statics/images/48-楮实子1.jpg'},
					{id:48,name: '胡芦巴', alias: '苦豆、芦巴子', indications: '温肾助阳，祛寒止痛。',efficacy: '用于肾阳不足，下元虚冷，小腹冷痛，寒疝腹痛，寒湿脚气。',commonlyUsed: '常用于疝气、经前期综合征、足癣等疾病的治疗。',picture1:'./statics/images/49-胡芦巴.jpg',picture2:'./statics/images/49-胡芦巴1.jpg'},
					{id:49,name: '刺五加', alias: '坎拐棒子、老虎潦', indications: '益气健脾，补肾安神。',efficacy: '用于脾肺气虚，体虚乏力，食欲不振，肺肾两虚，久咳虚喘，肾虚腰膝酸痛，心脾不足，失眠多梦。',commonlyUsed: '常用于缺血性脑卒中、慢性疲劳综合征、睡眠障碍等疾病的治疗。',picture1:'./statics/images/50-刺五加.jpg',picture2:'./statics/images/50-刺五加1.jpg'},
				]
                return dataList[index];
            }

            /* 取0-9的随机数 */
            function getRandNum(maxNum) {
                return parseInt(Math.random() * maxNum);
            }
            
            /* 辅助打乱数组 */
            var funForRandArr = function() {
                return 0.5 - Math.random();
            }
            
            /* 将数组内的单元打乱 */
            function randArr(arr) {
                return arr.sort(funForRandArr);
            }
            
            /* 判断同行或同列的两个格子能否被消除 */
            function sameXorY(a, b1, b2, xy) {
                var blnRe = true;
                var t = b2;
                if (b1 > b2) {
                    b2 = b1;
                    b1 = t;
                }
                b1 = parseInt(b1);
                b2 = parseInt(b2);
                var tds = $('td[' + xy + '=' + a + ']');
                for (t = b1 + 1; t < b2; t ++) {
                    blnRe = tds.eq(t).hasClass('removed');
                    if (!blnRe) {
                        break;
                    }
                }
                return blnRe;
            }
            
            /* 判断四个格子能否消除 */
            function check4boxes(tdA, tdB, tdA_, tdB_, exComplex) {
                var blnRe = false;
                if (tdA_.hasClass('removed') && tdB_.hasClass('removed')) {
                    if (canBeRemoved(tdA_, tdB_, false, exComplex)) {
                        blnRe = (canBeRemoved(tdA_, tdA, false, false) && canBeRemoved(tdB_, tdB, false, false));
                    }
                }
                return blnRe;
            }
            
            /* 判断三个格子能否消除 */
            function check3boxes(tdA, tdB, td) {
                var blnRe = false;
                if (td.hasClass('removed')) {
                    blnRe = (canBeRemoved(tdA, td, false, true) && canBeRemoved(tdB, td, false, true));
                }
                return blnRe;
            }
            
            /* 判断两个格子是否能基于边缘消除 */
            function diffXandY_1(x1, y1, x2, y2) {
                var blnRe = false;
                var intRow_ = intRow - 1;
                var tdA = $('td[x=' + x1 + ']').eq(y1);
                var tdB = $('td[x=' + x2 + ']').eq(y2);
                var td = $('td[x=' + x1 + ']').eq(y2);
                if (check3boxes(tdA, tdB, td)) {
                    blnRe = true;
                } else {
                    td = $('td[x=' + x2 + ']').eq(y1);
                    blnRe = check3boxes(tdA, tdB, td);
                }
                if (!blnRe) { // 进入更复杂的边缘判断
                    var tdAs_ = $('td[x=' + x1 + ']');
                    var tdBs_ = $('td[x=' + x2 + ']');
                    var tdA_ = tdAs_.eq(0);
                    var tdB_ = tdBs_.eq(0);
                    if (check4boxes(tdA, tdB, tdA_, tdB_, true)) {
                        blnRe = true;
                    } else {
                        tdA_ = tdAs_.eq(intRow_);
                        tdB_ = tdBs_.eq(intRow_);
                        if (check4boxes(tdA, tdB, tdA_, tdB_, true)) {
                            blnRe = true;
                        } else {
                            tdAs_ = $('td[y=' + y1 + ']');
                            tdBs_ = $('td[y=' + y2 + ']');
                            tdA_ = tdAs_.eq(0);
                            tdB_ = tdBs_.eq(0);
                            if (check4boxes(tdA, tdB, tdA_, tdB_, true)) {
                                blnRe = true;
                            } else {
                                tdA_ = tdAs_.eq(intRow_);
                                tdB_ = tdBs_.eq(intRow_);
                                blnRe = check4boxes(tdA, tdB, tdA_, tdB_, true);
                            }
                        }
                    }
                }
                return blnRe;
            }
            
            /* 判断两个格子是否能基于内部消除 */
            function diffXandY_2(x1, y1, x2, y2) {
                var blnRe = false;
                var tdA = $('td[x=' + x1 + ']').eq(y1);
                var tdB = $('td[x=' + x2 + ']').eq(y2);
                var tdAs = $('td[x=' + x1 + ']');
                var tdBs = $('td[x=' + x2 + ']');
                var tdA_;
                var tdB_;
                var i;
                for (i = 0; i < intRow; i ++) {
                    tdA_ = tdAs.eq(i);
                    tdB_ = tdBs.eq(i);
                    blnRe = check4boxes(tdA, tdB, tdA_, tdB_, false);
                    if (blnRe) {
                        break;
                    }
                }
                if (!blnRe) { // 行列不能进行消除的话,进入纵列扫描
                    tdAs = $('td[y=' + y1 + ']');
                    tdBs = $('td[y=' + y2 + ']');
                    for (i = 0; i < intRow; i ++) {
                        tdA_ = tdAs.eq(i);
                        tdB_ = tdBs.eq(i);
                        blnRe = check4boxes(tdA, tdB, tdA_, tdB_, false);
                        if (blnRe) {
                            break;
                        }
                    }
                }
                return blnRe;
            }
            
            /* 判断两个格子能否消除的入口函数 */
            function canBeRemoved(tdA, tdB, complex, exComplex) {
                var aX = tdA.attr('x');
                var aY = tdA.attr('y');
                var bX = tdB.attr('x');
                var bY = tdB.attr('y');
                var blnRe = false;
                if ((aX === bX && Math.abs(aY - bY) === 1) || (aY === bY && Math.abs(aX - bX) === 1)) { // 两格子是邻居?
                    blnRe = true;
                } else if ((complex || exComplex) && ((aX === bX && (aX === 0 || aX === intRow - 1)) || (aY === bY && (aY === 0 || aY === intRow - 1)))) { // 两格子在边缘?
                    blnRe = true;
                } else if ((aX === bX && sameXorY(aX, aY, bY, 'x')) || (aY === bY && sameXorY(aY, aX, bX, 'y'))) { // 两格子同行或同列?
                    blnRe = true;
                } else if (complex) {
                    if (diffXandY_1(aX, aY, bX, bY)) { // 复杂的判断
                        blnRe = true;
                    } else { // 更复杂的判断
                        blnRe = diffXandY_2(aX, aY, bX, bY);
                    }
                }
                return blnRe;
            }
            
            /* 计时并显示 */
            function timer() {
                if (blnTimer) {
                    $('button').first().html('已用时' + (++intSeconds) + '秒 点击重新排列');
                    setTimeout(timer, 1000);
                }
            }
            
            /* 重新排列 */
            function refresh() {
                var tds = $('td');
                var arrTd = [];
                for (var i = 0; i < intCntBoxes; i ++) {
                    arrTd[i] = tds.eq(i)[0].outerHTML;
                }
                randArr(arrTd);
                var k = 0;
                var s = '';
                var strTable = '<table>';
                for (i = 0; i < intRow; i ++) {
                    strTable += '<tr>';
                    for (var j = 0; j < intRow; j ++) {
                        s = arrTd[k].replace(/x="\d+"/, 'x="' + i + '"');
                        s = s.replace(/y="\d+"/, 'y="' + j + '"');
                        strTable += s;
                        k ++;
                    }
                    strTable += '</tr>';
                }
                strTable += '</table>';
				// 重新添加按钮
				strTable += '<div><button class="button-wrap" onclick="refresh();">' + '已用时' + (intSeconds) + '秒 点击重新排列' + '</button></div>'
                $('#gameContent').first().html(strTable);
                $('td').each(function() {
                    $(this).click(td_click);
                });
            }
            
            /* 判断是否完成游戏 */
            function isCompleted() {
                if ($('.removed').length == intCntBoxes) {
                    blnTimer = false;
                    var btn = $('button').first();
                    btn.unbind();
                    btn.html('点击再来一局');
                    btn.bind('click', function() {
                        window.location.replace(window.location.href);
                    });
                    $('td').unbind();
                    if (confirm('好厉害,共用时' + intSeconds + '秒,再来一局?')) {
                        window.location.replace(window.location.href);
                    }
                }
            }
            
            /* 格子被点击的事件 */
            var td_click = function() {
                var _this = $(this);
                var _otherActives = $('.active');
                if (_otherActives.length <= 1) {
                    if (_this.hasClass('common')) {
                        _this.removeClass('common');
                        _this.addClass('active');
                        // 获取当前值
                        var _otherActive = _otherActives.first();
                        var _otherActiveNum = _otherActive.attr('value')
                        if (!isNaN(_otherActiveNum)) {
                            // 获取上一个点击的值
                            var _thisNum = _this.attr('value');
                            if (_thisNum !== _otherActiveNum) {
                                _otherActive.removeClass('active');
                                _otherActive.addClass('common');
                            } else {
                                // 是否两次点击的数字相同
                                if (canBeRemoved(_this, _otherActive, true, false)) {
                                    _this.removeClass('common');
                                    _this.removeClass('active');
                                    _this.addClass('removed');
                                    _this.html(' ');
                                    _this.removeAttr('value')
                                    _otherActive.removeClass('common');
                                    _otherActive.removeClass('active');
                                    _otherActive.addClass('removed');
                                    _otherActive.html(' ');
                                    _otherActive.removeAttr('value')
                                    // 赋值给展示内容
                                    var dataInfo = getDataInfo(_otherActiveNum);
                                    // $('#clickContent').html(_otherActiveNum);
                                    $('#descriptionPicture').css('background-image','url(' + dataInfo.picture1 +')')
									$('#descriptionPicture2').css('background-image','url(' + dataInfo.picture2 +')')
                                    $('#description > h4 > #name').html(dataInfo.name)
									$('#description > h4 > #alias').html('（' + dataInfo.alias + '）')
                                    $('#indications').html('功能：' + dataInfo.indications)
                                    $('#efficacy').html('主治：' + dataInfo.efficacy)
									$('#commonlyUsed').html('常用于：' + dataInfo.efficacy)
									isCompleted();
                                } else {
                                    _this.removeClass('active');
                                    _this.addClass('common');
                                    _otherActive.removeClass('active');
                                    _otherActive.addClass('common');
                                }
                            }
                        }
                    } else if (_this.hasClass('active')) {
                        _this.removeClass('active');
                        _this.addClass('common');
                    }
                }
            }

            var maxNum = 20 // 循环多少个随机数
            var intRow = 10; // 设置行数,必须是个偶数,开成一个n*n的格子阵列
            var intCntBoxes = intRow * intRow;
            var intHalfCntBoxes = intCntBoxes / 2;
            var blnTimer = false;
            var intSeconds = 0;
			var size='73px';
            $(document).ready(function() {
                var arrNum = [];
                var arrTd = [];
                /**
                 * 先生成总数量一半数字的数组，然后添加两边
                 * */
                for (var k = 0; k < intHalfCntBoxes; k ++) {
                    arrNum[k] = getRandNum(maxNum);
                    var dataInfo = getDataInfo(arrNum[k]);
                    arrTd[k] = ' class="common" align="center" valign="middle" ' +
                        'style="width:' + size + '; height: ' + size + '"' +
                        'value="'+dataInfo.id+'">' +
                        // 图片对应的位置
                        '<image src="' + dataInfo.picture1 + '" alt="' + dataInfo.name + '" width="'+size+'" height="'+size+'">'+
                        // arrNum[k] +
                        '</td>';
                }
                // 打乱生成的数组，此时数组只有一半
                randArr(arrNum);
                for (k = 0; k < intHalfCntBoxes; k ++) {
                    var dataInfo = getDataInfo(arrNum[k]);
                    arrTd[k + intHalfCntBoxes] = ' class="common" align="center" valign="middle" ' +
						'style="width:' + size + '; height: ' + size + '"' +
                        'value="'+dataInfo.id+'">' +
                        // 生成图片对应的位置
                        // arrNum[k] +
                        '<image src="' + dataInfo.picture1 + '" alt="' + dataInfo.name + '" width="'+size+'" height="'+size+'">'+
                        '</td>';
                }
                // 打乱生成的数组，此时数组有全部
                randArr(arrTd);
                var strTable = '<table>';
                k = 0;
                for (var i = 0; i < intRow; i ++) {
                    strTable += '<tr>';
                    for (var j = 0; j < intRow; j ++) {
                        strTable += '<td x="' + i + '" y="' + j + '"' + arrTd[k];
                        k ++;
                    }
                    strTable += '</tr>';
                }
                strTable += '</table>';
				strTable += '<div><button class="button-wrap" onclick="refresh();">' + '已用时' + (intSeconds) + '秒 点击重新排列' + '</button></div>'
                $('#gameContent').first().html(strTable);
                $('td').each(function() {
                    $(this).click(td_click);
                });
                blnTimer = true;
                timer();
            });
        </script>
    </head>
    <body>
		<div id="main" class="main_css">
			<div class="descriptionBody">
				<div id="picture" style="display: flex">
					<div id="descriptionPicture" class="descriptionPicture" ></div>
					<div id="descriptionPicture2" class="descriptionPicture" ></div>
				</div>
				<div id="description" class="description" >
					<h4 class="h4_css" >
						<span id="name"></span>
						<span id="alias" style="color: red"></span>
					</h4>
					<p id="indications" class="p_css"></p>
					<p id="efficacy" class="p_css" ></p>
					<p id="commonlyUsed" class="p_css" ></p>
				</div>
			</div>
			<!-- 游戏内容 -->
			<div id="gameContent" ></div>
		</div>
    </body>
</html>
<style>
	.main_css {
		display: flex;
	}
    .descriptionBody {
		margin-top: 30px;
        color: black;
        width: 1000px;
        align-items:center;
    }
    .descriptionPicture{
        width: 500px;
        height: 500px;
        background-size: cover;
        align-self: center;
		margin: 0 20px;
    }
    .description {
        font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;
        --el-font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
        width: auto;
        flex-direction:column;
        /*margin-left: 16px*/
    }
	.description p {
		margin: 20px 0;
	}
	.h4_css {
		font-weight:700;
		text-align: left;
		font-size: 30px;
	}
	.p_css {
		font-weight:500;
		font-size: 25px;
		justify-self:left;
		margin-left: 0;
		text-align: left;
	}
	.button-wrap {
		align-items: center;
		background-color: #fff;
		border-radius: 12px;
		box-shadow: transparent 0 0 0 3px, rgba(18, 18, 18, 0.1) 0 6px 20px;
		box-sizing: border-box;
		color: #121212;
		cursor: pointer;
		display: inline-flex;
		flex: 1 1 auto;
		font-family: Inter, sans-serif;
		font-size: 1.2rem;
		font-weight: 700;
		justify-content: center;
		line-height: 1;
		margin: 0;
		outline: 0;
		padding: 1rem 1.2rem;
		text-align: center;
		text-decoration: none;
		transition: box-shadow .2s;
		white-space: nowrap;
		border: 0;
		-moz-user-select: none;
		user-select: none;
		-webkit-user-select: none;
		touch-action: manipulation;
	}
</style>